@import "variables";
@import "mixins";



/* float */
.fl {  float: left !important; }
.fr {  float: right !important; }
.fb { @include absolute(auto, 0, 0, 0); }
.clearfix {
  @include clearfix;
}

/* display */
.block { display: block !important; }
.inline-black { display: inline-block !important; }
.inline { display: inline !important; }
.flex { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; }

/* text-align */
.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }

/* text-decoration */
.tdlt { text-decoration: line-through !important; }
.tdul { text-decoration: underline !important; }
.tdol { text-decoration: overline !important; }

/* vertical-align */
.vat { vertical-align: top !important; }
.vam { vertical-align: middle !important; }
.vab { vertical-align: bottom !important; }
.vatt { vertical-align: text-top !important; }
.vatb { vertical-align: text-bottom !important; }

/* colors */
@each $key, $value in $color {
  .#{$key} {
    color: $value !important;
  }
}
.bgc { background-color: $background-color-default !important; }

/* font-size */
@each $key, $value in $fontSize {
  .#{$key} {
    font-size: $value !important;
  }
}

@mixin make-padding-helper($class, $size) {
  .p-#{$class}   { padding: $size !important; }
  .p-t-#{$class} { padding-top: $size !important; }
  .p-r-#{$class} { padding-right: $size !important; }
  .p-b-#{$class} { padding-bottom: $size !important; }
  .p-l-#{$class} { padding-left: $size !important; }
  .p-h-#{$class} { padding-left: $size !important; padding-right: $size !important; }
  .p-v-#{$class} { padding-top: $size !important; padding-bottom: $size !important; }
}
@mixin make-margin-helper($class, $size) {
  .m-#{$class}   { margin: $size !important; }
  .m-t-#{$class} { margin-top: $size !important; }
  .m-r-#{$class} { margin-right: $size !important; }
  .m-b-#{$class} { margin-bottom: $size !important; }
  .m-l-#{$class} { margin-left: $size !important; }
  .m-h-#{$class} { margin-left: $size !important; margin-right: $size !important; }
  .m-v-#{$class} { margin-top: $size !important; margin-bottom: $size !important; }
}
/* padding & margin */
@each $key, $value in $size {
  @include make-padding-helper($key, $value);
  @include make-margin-helper($key, $value);
  @include make-margin-helper("-#{$key}", (- $value));
}

/* WebKit浏览器或移动端多行文本溢出显示省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis-2 {
  @extend .ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal!important;
  word-wrap: break-word;
}
.ellipsis-3 {
  @extend .ellipsis-2;
  -webkit-line-clamp: 3;
}


/* line-height */
.lhx100 { line-height: 100% !important; }
.lhx150 { line-height: 150% !important; }
.lhx200 { line-height: 200% !important; }
.lhx250 { line-height: 250% !important; }
.lhx300 { line-height: 300% !important; }

/* width */
.wf { width: 100% !important; }
.w30 { width: 30px !important; min-width: 30px !important; }
.w50 { width: 50px !important; min-width: 50px !important; }
.w80 { width: 80px !important; min-width: 80px !important; }
.w100 { width: 100px !important; min-width: 100px !important; }
.w160 { width: 160px !important; min-width: 160px !important; }
.w210 { width: 210px !important; min-width: 210px !important; }
/* height */
.hf { height: 100% !important; }
.h20 { height: 20px !important; }
.h40 { height: 40px !important; }
.h50 { height: 50px !important; }
.h100 { height: 100px !important; }
.hauto { height: auto !important; }

.nw{white-space: nowrap;}

/** 币种 **/
[currency=RMB]:before, [currency=CNY]:before, [currency=人民币]:before { content: "￥" }
[currency=USD]:before, [currency=美元]:before { content: "$" }


.require:before {
  content: "*";
  color: color(red);
}